import React, { Component } from 'react';
import { NavBar, Icon, SearchBar, Button, WhiteSpace, WingBlank } from 'antd-mobile';
import myaxios from "../../utils/myaxios";
import {withRouter} from 'react-router-dom'
class SearchCenter extends Component {
  state = {
    value: '',
    productList: []
  };
  // componentDidMount() {
  //   this.autoFocusInst.focus();
  // }
  onChange = (value) => {
    this.setState({ value });

  };
  clear = () => {
    this.setState({ value: '' });
  };
  handleClick = () => {
    myaxios.get('goods/qsearch', {
      params: {
        query: this.state.value
      }
    }).then((res) => {
      console.log(res);
      this.setState({
        productList: res
      })
    })
  }
  handleItemClick =(e)=>{
    let good_id = e.target.getAttribute("data-goods_id");
    console.log(good_id);
    this.props.history.push("/goodDetail/"+good_id)
  }
  render() {
    return (
      <div className='SearchCenter'>
        <NavBar
          mode="light"
          icon={<Icon type="left" />}
          onLeftClick={() => console.log('onLeftClick')}
          rightContent={[
            <Icon key="0" type="search" style={{ marginRight: '16px' }} />,
            <Icon key="1" type="ellipsis" />,
          ]}
        >搜索中心</NavBar>
        <SearchBar
          value={this.state.value}
          placeholder="请输入商品名称"
          // onSubmit={value => console.log(value, 'onSubmit')}
          onClear={this.clear}
          // onFocus={() => console.log('onFocus')}
          // onBlur={() => console.log('onBlur')}
          onCancel={this.handleClick}
          showCancelButton
          cancelText="搜索"
          onChange={this.onChange}
        />
        <div className='yg-sc-list' onClick={this.handleItemClick}>
          {
            this.state.productList.map((v, index) => {
              return (
                <div className="sc-list-item" key={v.goods_id} data-goods_id={v.goods_id}>
                  {v.goods_name}
                </div>
              )
            })
          }
        </div>
      </div>
    );
  }
}

export default withRouter(SearchCenter);

